<template>
  <div>
    <div
        style="overflow:hidden;
        background-image: url(/imgs_wly/headerdog.png);
        background-repeat: no-repeat;
        background-size: cover;
        width:auto;
        height: 590px;">
    </div>
    <div style="width: 100%;
    height: auto;
    overflow: hidden;
    background: url(/imgs_wly/mouse.png) no-repeat right bottom;
    margin-top: 60px;">
      <div><p id="foot"> 联系我们 </p></div>

      <div id="big">

        <div class="middle">
          <img src="../assets/imgs_wly/phone.png" alt="">
          <span>400-020-8888</span>
        </div>

        <div class="middle">
          <img src="../assets/imgs_wly/ceal.png" alt="">
          <span>mailianzhonghe@rp-pet.cn</span>
        </div>

        <div class="middle">
          <img src="../assets/imgs_wly/map.png" alt="">
          <span>北京市朝阳区景华南街<br>5号远洋·光华国际C座19层</span>
        </div>
      </div>

      <div class="bottom" style="width: 100%; height: 478px;">
        <div class="left">
          <img src="../assets/imgs_wly/upleft.png" alt="">
        </div>

        <div class="right">
          <div>
            <div>
              <span>姓名</span>
              <el-input
                  style="width: 150px"
                  placeholder="请输入内容"
                  v-model="input"
                  clearable>
              </el-input>
              <span>邮箱</span>
              <el-input
                  style="width: 150px"
                  placeholder="请输入内容"
                  v-model="input"
                  clearable>
              </el-input>
            </div>

            <div>
              <span>电话</span>
              <el-input
                  style="width: 200px"
                  placeholder="请输入内容"
                  v-model="input"
                  clearable>
              </el-input>
            </div>


            <div class="content">
              <span id="message1">内容</span>
              <textarea name="message" id="message" class="message"></textarea>
            </div>
            <input name="提交" type="submit" value="提交" class="submit">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ContactUsView"
}
</script>

<style scoped>
* {
  margin: 0px auto;
}
#foot {
  width: 100%;
  text-align: center;
  font-size: 36px;
  color: #5a5a5a;
  font-weight: bold;
  background: url(../assets/imgs_wly/foot.png) no-repeat center bottom;
  height: 90px;
}
p{
  width: 100%;
  font: 20px 微软雅黑;
  color: #5a5a5a;
  font-family: Arial, Helvetica, sans-serif;
  height: 50px;
  line-height: 50px;
}
#big{
  display: flex;
  justify-content: center;
}
#big>div{
  height: 522px;
  margin: 0 50px;
}
.middle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.middle img{
  width: 100px;
}
.bottom {
  display: flex;
}

.bottom>.left{
  flex: 1;
  height: 630px;
  overflow: hidden;
}
.bottom>.right{
  flex: 1;
  background: url(../assets/imgs_wly/upright.png) no-repeat center;
}
.bottom>.right>div{
  display: flex;
  flex-direction: column;
  width: 465px;
  height: 478px;
  font-size: 24px;
  color: #fff;
  margin-top: 80px;
  margin-left: 80px;
}

.bottom>.right>div>div{
  margin-bottom: 20px;
}
.bottom>.right>div>.content {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.bottom>.right>div>.content>span {
  display: flex;
  margin-right: 10px;
}
.bottom>.right>div>.content>textarea{
  flex: 1;
}
.message{
  fheight: 90px;
  border-radius: 7px;
  border: none;
  background-color: rgba(255,255,255,0.8);
  width: 349px;
  padding: 10px  18px;
}
.submit{
  align-self: end;
  font-size: 18px;
  color: #fff;
  border-radius: 7px;
  width: 150px;
  height: 38px;
  background-color: #009eb6;
  border: none;
  margin-left: 355px;
}

*{
  margin: 0px;
  padding: 0px;
}
</style>